<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据交互实现</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			html,body{
				height: 100%;
				width: 100%;
			}
			.box{
				width: 50%;
				margin: 0 auto;
				height: 80%;
			}
			.input_info{
				margin-top: 30px;
			}
			.input_style{
				width: 50%;
				margin: 0 auto;
			}
			h1{
				margin: 5px;
				color: red;
				font-size: 12px;
				font-weight: 500;
				width: 100%;
				text-align: center;
				opacity: 0;
				
			}
			.btn:focus, .btn:active:focus, .btn.active:focus,
			.btn.focus, .btn:active.focus, .btn.active.focus {
				outline: none;
			}


		</style>
		
	</head>
	<body>
		
		<div class="box">
			<div class="input_info">
				<div class="input_style">
						
					姓名<input type="text" class="form-control" placeholder="name" >
					<h1>姓名为2-4个汉字</h1>
					方向<input type="text" class="form-control" placeholder="type"/>
					<h1>方向仅有前端、java、大数据</h1>
					老师<input type="text" class="form-control" placeholder="teacher"/>
					<h1>老师必须为3-6位英文</h1>
					<button type="button" class="btn btn-success" style="float: right;margin: 20px;" >添加</button>
				</div>
			</div>
			<div class="student_info">
				<table class="table table-bordered table-hover" >
					<thead >
						<tr class="success" >
							<th>序号</th>
							<th>姓名</th>
							<th>方向</th>
							<th>老师</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody" style="text-align: center;">
					</tbody>
				</table>
			</div>
		</div>
	</body>
	
	<script src="js/jquery-3.5.1.min.js"></script>
	<script src="js/template-web.js"></script>
	<!-- 在自定义js文件前引入jq，自己实现的js也就引入了jq -->
	<script src="./js/index.js"></script>
	
	<!-- 定义模板引擎 id用于js获取模板引擎 -->
	<!-- 这是一个模板引擎，简单来说就是构建一个模板，让其生成html的js代码 -->
	<!-- 如果不用该js，手动来操作，我们可能需要繁杂的拼接html标签，还要做for循环。 -->
	<script type="text/html" id="tmplt">
	<!-- 这个值只能是val不能是item具有固定含义 用于循环列表	-->
		{{each data val index }}
			<tr>
				<td>{{val.id}}</td>
				<td>{{val.name}}</td>
				<td>{{val.type}}</td>
				<td>{{val.teacher}}</td>
				<td><button type="button" class="btn btn-danger delete" >删除</button></td>
			</tr>
		{{/each}}
	</script>

</html>
